<template>
  <div
    v-if="visible"
    class="card-contanier"
    :style="
      single
        ? 'min-width:330px;padding: 5px 5px 24px 22px;top: 150px;left: 150px'
        : 'width: 428px;padding: 5px 5px 36px 22px;'
    "
    @click.stop
  >
    <!--    <div-->
    <!--        v-if="typeCard === 'airline'"-->
    <!--        :style="-->
    <!--          single-->
    <!--            ? 'display: flex; justify-content: center; margin-top: 20px'-->
    <!--            : 'display: flex; justify-content: center; margin-top: 42px'-->
    <!--        "-->
    <!--    >-->
    <!--      <div-->
    <!--          class="goBack"-->
    <!--          :style="single ? 'font-size: 12px;' : 'font-size: 16px;'"-->
    <!--          @click.stop="closeCard"-->
    <!--      >-->
    <!--        关闭-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div v-if="typeCard !== 'airline'" class="card-contanier-header">-->
    <div v-if="typeCard !== 'airline'" class="card-contanier-header">
      <div
        class="card-contanier-title"
        :style="single ? 'font-size: 14px;' : 'font-size: 20px;'"
      >
        {{ title }}
      </div>
      <div class="close" @click.stop="closeCard">
        <img :src="VITE_BASE_PUBLICPATH + '/img/cockpit/closeBtn.png'" alt="" />
      </div>
    </div>
    <div v-else class="card-contanier-header">
      <div class="close2" @click.stop="closeCard">
        <img :src="VITE_BASE_PUBLICPATH + '/img/cockpit/closeBtn.png'" alt="" />
      </div>
    </div>
    <div
      class="card-contanier-content"
      :style="
        single
          ? 'font-size: 12px;width: 95%;'
          : 'font-size: 16px;width: 378px;'
      "
    >
      <!-- 设备详情 -->
      <div v-if="typeCard === 'device'">
        <div class="content-word">
          <span>布防点位：</span>
          <span class="content">{{ content.name || "-" }}</span>
        </div>
        <div class="content-word">
          <span>设备名称：</span>
          <span class="content">{{ content.deviceName || "-" }}</span>
        </div>
        <div class="content-word">
          <span>设备类型：</span>
          <span class="content">{{ content.generCategName || "-" }}</span>
        </div>
        <div class="content-word">
          <span>设备位置：</span>
          <span class="content">{{
            content.longitude
              ? `${(content.longitude * 1).toFixed(8)} ${(
                  content.latitude * 1
                ).toFixed(8)}`
              : "-"
          }}</span>
        </div>
        <!-- <div class="content-word">
          <span>时间：</span>
          <span class="content">{{ content.creTime }}</span>
        </div>
        <div class="content-word">
          <span>经度：</span>
          <span class="content">{{ content.longitude }}</span>
        </div>
        <div class="content-word">
          <span>纬度：</span>
          <span class="content">{{ content.latitude }}</span>
        </div>
        <div class="content-word">
          <span>海拔：</span>
          <span class="content">{{ content.altitude }}</span>
        </div>
        <div class="content-word">
          <span>航向：</span>
          <span class="content">还没有</span>
        </div>
        <div class="content-word">
          <span>导航状态：</span>
          <span class="content">还没有</span>
        </div> -->
      </div>

      <!-- 航线信息 -->
      <!-- <div v-if="typeCard === 'airline'">
        <div class="content-word">
          <span>航线名称：</span>
          <el-tooltip
            effect="dark"
            :disabled="content.routeName < 15"
            :content="content.routeName"
            placement="top"
          >
            <span class="content">{{ content.routeName || "-" }}</span>
          </el-tooltip>
        </div>
        <div class="content-word">
          <span>拥有者：</span>
          <el-tooltip
            effect="dark"
            :disabled="content.applyName < 15"
            :content="content.applyName"
            placement="top"
          >
            <span class="content">{{ content.applyName || "-" }}</span>
          </el-tooltip>
        </div>
        <div class="content-word">
          <span>起点：</span>
          <el-tooltip
            effect="dark"
            :disabled="content.takeOffAddress < 15"
            :content="content.takeOffAddress"
            placement="top"
          >
            <span class="content">{{ content.takeOffAddress || "-" }}</span>
          </el-tooltip>
        </div>
        <div class="content-word">
          <span>终点：</span>
          <el-tooltip
            effect="dark"
            :disabled="content.landingAddress < 15"
            :content="content.landingAddress"
            placement="top"
          >
            <span class="content">{{ content.landingAddress || "-" }}</span>
          </el-tooltip>
        </div>
        <div class="content-word">
          <span>备降点：</span>
          <el-tooltip
            effect="dark"
            :disabled="content.ALTNAddress < 15"
            :content="content.ALTNAddress"
            placement="top"
          >
            <span class="content">{{ content.ALTNAddress || "-" }}</span>
          </el-tooltip>
        </div>
        <div class="content-word">
          <span>申请时间：</span>
          <el-tooltip
            effect="dark"
            :disabled="content.applyTime < 15"
            :content="content.applyTime"
            placement="top"
          >
            <span class="content">{{ content.applyTime || "-" }}</span>
          </el-tooltip>
        </div>
        <div class="content-word">
          <span>有效时间：</span>
          <el-tooltip
            effect="dark"
            :disabled="`${content.startTime} - ${content.endtTime}` < 15"
            :content="`${content.startTime} - ${content.endTime}`"
            placement="top"
          >
            <span class="content">{{
              content.startTime
                ? `${content.startTime} - ${content.endTime}`
                : "-"
            }}</span>
          </el-tooltip>
        </div>
      </div> -->

      <!-- 企业信息 -->
      <div v-if="typeCard === 'company'">
        <div class="content-word">
          <el-tooltip
            effect="dark"
            :disabled="content.unitName < 15"
            :content="content.unitName"
            placement="top"
          >
            <span>{{ content.unitName || "-" }}</span>
          </el-tooltip>
        </div>
        <div class="content-word">
          <el-tooltip
            effect="dark"
            :disabled="content.remark < 15"
            :content="content.remark"
            placement="top"
          >
            <span>{{ content.remark || "-" }}</span>
          </el-tooltip>
        </div>
      </div>

      <!-- 机场天气 -->
      <div v-if="typeCard === 'airport' || typeCard === 'otherAirport'">
        <div class="content-word">
          <span>观测时间：</span>
          <span class="content">{{ content.updatetime || "-" }}</span>
        </div>
        <div class="content-word">
          <span>天气：</span>
          <span class="content">{{ content.condition || "-" }}</span>
        </div>
        <div class="content-word">
          <span>风速：</span>
          <span class="content">{{
            content.windSpeed ? `${content.windSpeed} m/s` : "-"
          }}</span>
        </div>
        <div class="content-word">
          <span>风向：</span>
          <span class="content">{{ content.windDir || "-" }}</span>
        </div>
        <div class="content-word">
          <span>能见度：</span>
          <span class="content">{{
            content.vis ? `≥${content.vis}m` : "-"
          }}</span>
        </div>
        <div class="content-word">
          <span>温度：</span>
          <span class="content">{{
            content.temp ? `${content.temp}℃` : "-"
          }}</span>
        </div>
        <div class="content-word">
          <span>修正海压：</span>
          <span class="content">{{
            content.pressure ? `${content.pressure}hPa` : "-"
          }}</span>
        </div>
      </div>

      <!-- 民航信息 -->
      <div v-if="typeCard === 'plane'">
        <div class="content-word">
          <span>航班号：</span>
          <span class="content">{{ content.droneSerialId || "-" }}</span>
        </div>
        <div class="content-word">
          <span>当前位置：</span>
          <span class="content">{{
            content.curLongitude
              ? `${content.curLongitude.toFixed(
                  8
                )},${content.curLatitude.toFixed(8)}`
              : "-"
          }}</span>
        </div>
        <div class="content-word">
          <span>当前高度：</span>
          <span class="content">{{
            content.curHeight ? `${content.curHeight}米` : "-"
          }}</span>
        </div>
        <div class="content-word">
          <span>当前速度：</span>
          <span class="content">{{
            content.curSpeed ? `${content.curSpeed}千米/小时` : "-"
          }}</span>
        </div>
      </div>

      <!-- 空域信息 -->
      <div v-if="typeCard === 'airspace'">
        <div class="content-word">
          <span>空域名称：</span>
          <span class="content">{{ content.airspaceName || "-" }}</span>
        </div>
        <div class="content-word">
          <span>限制高度：</span>
          <span class="content">{{
            `${content.lowHeight}米 ~ ${content.topHeight}米`
          }}</span>
        </div>
        <div class="content-word">
          <span>时间范围：</span>
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="content.dateRange"
            placement="top"
          >
            <span class="content">{{ content.dateRange || "-" }}</span>
          </el-tooltip>
        </div>
      </div>

      <div v-if="typeCard === 'noperson'">
        <div class="content-word">
          <span>飞手名称：</span>
          <span class="content">飞手1号</span>
        </div>
        <div class="content-word">
          <span>联系电话：</span>
          <span class="content">17641160201</span>
        </div>
        <div class="content-word">
          <span>所属单位：</span>
          <span class="content">杰能科世智能安全科技（杭州）有限公司</span>
        </div>
      </div>

      <el-tabs
        v-if="typeCard === 'airline'"
        v-model="activeName"
        :class="single ? 'single-demo-tabs' : 'demo-tabs'"
      >
        <el-tab-pane label="航线信息" name="first">
          <div class="content-word">
            <span>航线名称：</span>
            <el-tooltip
              effect="dark"
              :disabled="content.routeName < 15"
              :content="content.routeName"
              placement="top"
            >
              <span class="content">{{ content.routeName || "-" }}</span>
            </el-tooltip>
          </div>
          <div class="content-word">
            <span>拥有者：</span>
            <el-tooltip
              effect="dark"
              :disabled="content.applyName < 15"
              :content="content.applyName"
              placement="top"
            >
              <span class="content">{{ content.applyName || "-" }}</span>
            </el-tooltip>
          </div>
          <div class="content-word">
            <span>起点：</span>
            <el-tooltip
              effect="dark"
              :disabled="content.takeOffAddress < 15"
              :content="content.takeOffAddress"
              placement="top"
            >
              <span class="content">{{ content.takeOffAddress || "-" }}</span>
            </el-tooltip>
          </div>
          <div class="content-word">
            <span>终点：</span>
            <el-tooltip
              effect="dark"
              :disabled="content.landingAddress < 15"
              :content="content.landingAddress"
              placement="top"
            >
              <span class="content">{{ content.landingAddress || "-" }}</span>
            </el-tooltip>
          </div>
          <div class="content-word">
            <span>备降点：</span>
            <el-tooltip
              effect="dark"
              :disabled="content.ALTNAddress < 15"
              :content="content.ALTNAddress"
              placement="top"
            >
              <span class="content">{{ content.ALTNAddress || "-" }}</span>
            </el-tooltip>
          </div>
          <div class="content-word">
            <span>申请时间：</span>
            <el-tooltip
              effect="dark"
              :disabled="content.applyTime < 15"
              :content="content.applyTime"
              placement="top"
            >
              <span class="content">{{ content.applyTime || "-" }}</span>
            </el-tooltip>
          </div>
          <div class="content-word">
            <span>有效时间：</span>
            <el-tooltip
              effect="dark"
              :disabled="`${content.startTime} - ${content.endtTime}` < 15"
              :content="`${content.startTime} - ${content.endTime}`"
              placement="top"
            >
              <span class="content">{{
                content.startTime
                  ? `${content.startTime} - ${content.endTime}`
                  : "-"
              }}</span>
            </el-tooltip>
          </div>
        </el-tab-pane>
        <!-- 机构 -->
        <el-tab-pane v-if="isFirm" label="所属人/单位信息" name="second">
          <div class="content-word">
            <span>管理员姓名：</span>
            <el-tooltip
              effect="dark"
              :disabled="ownerInfo.administratorName < 15"
              :content="ownerInfo.administratorName"
              placement="top"
            >
              <span class="content">{{
                ownerInfo.administratorName || "-"
              }}</span>
            </el-tooltip>
          </div>
          <div class="content-word">
            <span>管理员联系方式：</span>
            <el-tooltip
              effect="dark"
              :disabled="ownerInfo.phoneNumber < 15"
              :content="ownerInfo.phoneNumber"
              placement="top"
            >
              <span class="content">{{ ownerInfo.phoneNumber || "-" }}</span>
            </el-tooltip>
          </div>
          <div class="content-word">
            <span>管理员证件号码：</span>
            <el-tooltip
              effect="dark"
              :disabled="ownerInfo.credentialsNumber < 15"
              :content="ownerInfo.credentialsNumber"
              placement="top"
            >
              <span class="content">{{
                ownerInfo.credentialsNumber || "-"
              }}</span>
            </el-tooltip>
          </div>
          <div class="content-word">
            <span>机构名称：</span>
            <el-tooltip
              effect="dark"
              :disabled="ownerInfo.name < 15"
              :content="ownerInfo.name"
              placement="top"
            >
              <span class="content">{{ ownerInfo.name || "-" }}</span>
            </el-tooltip>
          </div>
          <div class="content-word">
            <span>机构类型：</span>
            <el-tooltip
              effect="dark"
              :disabled="ownerInfo.institutionTypeName < 15"
              :content="ownerInfo.institutionTypeName"
              placement="top"
            >
              <span class="content">{{
                ownerInfo.institutionTypeName || "-"
              }}</span>
            </el-tooltip>
          </div>
          <div class="content-word">
            <span>社会统一信用代码：</span>
            <el-tooltip
              effect="dark"
              :disabled="ownerInfo.unifiedSocialCreditCode < 15"
              :content="ownerInfo.unifiedSocialCreditCode"
              placement="top"
            >
              <span class="content">{{
                ownerInfo.unifiedSocialCreditCode || "-"
              }}</span>
            </el-tooltip>
          </div>
          <div class="content-word">
            <span>注册地址：</span>
            <el-tooltip
              effect="dark"
              :disabled="ownerInfo.liveZone < 15"
              :content="ownerInfo.liveZone"
              placement="top"
            >
              <span class="content">{{ ownerInfo.liveZone || "-" }}</span>
            </el-tooltip>
          </div>
          <div class="content-word">
            <span>法人证件号码：</span>
            <el-tooltip
              effect="dark"
              :disabled="ownerInfo.legalCredentialsNumber < 15"
              :content="ownerInfo.legalCredentialsNumber"
              placement="top"
            >
              <span class="content">{{
                ownerInfo.legalCredentialsNumber || "-"
              }}</span>
            </el-tooltip>
          </div>
          <div class="content-word">
            <span>营业执照：</span>
            <span v-if="ownerInfo.businessLicense" class="contant">
              <img
                style="width: 50px; height: 50px"
                :src="ownerInfo.businessLicense"
              />
            </span>
            <span v-if="!ownerInfo.businessLicense">-</span>
          </div>
        </el-tab-pane>
        <!-- 个人 -->
        <el-tab-pane v-if="!isFirm" label="所属人/单位信息" name="second">
          <div class="content-word">
            <span>姓名：</span>
            <span class="content">{{ ownerInfo.name || "-" }}</span>
          </div>
          <div class="content-word">
            <span>性别：</span>
            <span class="content">{{ ownerInfo.sex || "-" }}</span>
          </div>
          <div class="content-word">
            <span>联系方式：</span>
            <span class="content">{{ ownerInfo.phoneNumber || "-" }}</span>
          </div>
          <div class="content-word">
            <span>证件号码：</span>
            <span class="content">{{
              ownerInfo.credentialsNumber || "-"
            }}</span>
          </div>
          <div class="content-word">
            <span>居住地址：</span>
            <el-tooltip
              effect="dark"
              :disabled="ownerInfo.liveAddress < 15"
              :content="ownerInfo.liveAddress"
              placement="top"
            >
              <span class="content">{{ ownerInfo.liveAddress || "-" }}</span>
            </el-tooltip>
          </div>
          <div class="content-word">
            <span>飞行执照：</span>
            <span v-if="ownerInfo.pilotLicense" class="contant">
              <img
                style="width: 50px; height: 50px"
                :src="ownerInfo.pilotLicense"
              />
            </span>
            <span v-if="!ownerInfo.pilotLicense">-</span>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
import { defineProps, onMounted } from "vue";
import { getCurAirroute, getUserInfo } from "@/api/cockpit/airroute";
import { historyTrack } from "@/api/history/index";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  content: {
    type: Object,
    default: {},
  },
  visible: {
    type: Boolean,
    default: false,
  },
  typeCard: {
    type: String,
    default: "",
  },
  single: {
    type: Boolean,
    default: false,
  },
});

const VITE_BASE_PUBLICPATH = import.meta.env.VITE_BASE_PUBLICPATH;
const emits = defineEmits(["drawLine", "visibleClose"]);

// 航线拥有者是否为公司
const isFirm = ref(false);
// 当前选中的tab页面
const activeName = ref("first");
// 持有人信息
const ownerInfo = ref({});

const closeCard = () => {
  if (props.typeCard == "airline") {
    activeName.value = "first";
    isFirm.value = false;
    ownerInfo.value = {};
    emits("visibleClose", "airline");
  }
  emits("visibleClose");
};

watch(
  () => props.content,
  async (newV, oldV) => {
    if (props.typeCard === "airline") {
      let { applyType, applicantId } = props.content;
      if (applyType === 1) isFirm.value = true;
      const { data } = await getUserInfo({ applyType, applicantId });
      ownerInfo.value = data;
    }
  }
);

// 点位去重
function Deduplication(linePoints) {
  const arr = [];
  let len = linePoints.length;
  for (let i = 0; i < len; i++) {
    const curPoint = linePoints[i];
    if (i === len - 1) {
      arr.push(curPoint);
      break;
    }
    const nextPoint = linePoints[i + 1];
    let isDifferent = curPoint.some((item, index) => {
      return item !== nextPoint[index];
    });
    if (isDifferent) {
      arr.push(curPoint);
    }
  }
  return arr;
}

watch(
  () => props.content,
  async (newV, oldV) => {
    if (props.typeCard === "plane") {
      let position;
      let airspaceApplyId;
      let droneUK = props.content.droneUK;
      // console.log("///////////////", props.content);
      const { data } = await getCurAirroute({ droneUK });
      if (data.code === 501) {
        const { data } = await historyTrack({ droneUKs: [droneUK] });
        if (!data[0]) return;
        position = data[0].coors.map((item) => {
          return [
            item.longitude * 1,
            item.latitude * 1,
            item.height * 1,
          ];
        });
        airspaceApplyId = data.droneSerialId + "x1x";
      }
      position = data.coors.map((item) => {
        return [
          item.longitude * 1,
          item.latitude * 1,
          item.height * 1,
        ];
      });
      position = Deduplication(position);
      airspaceApplyId = data.droneSerialId + "x1x";
      let len = position.length;
      let curPosition = position[len - 1];

      let lineData = {
        ...data,
        droneIcon: "minghang1.png",
        airspaceApplyId,
        position,
        curPosition,
        zoom: 11,
        color: "#f0c919",
        EntityType: "track",
      };
      emits("drawLine", lineData);
    }
  }
);

onMounted(() => {
  // console.log(content);
});
</script>
<style lang="scss">
.card-contanier {
  position: absolute;
  z-index: 200;
  width: auto;
  //width: 428px;
  height: auto;
  padding: 5px 5px 36px 22px;
  border-radius: 4px;
  background-color: rgba(9, 27, 35, 0.8);
  border: 1px rgba(255, 255, 255, 0.6) solid;
  animation: rotate 3s linear infinite;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);


  .card-contanier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .card-contanier-title {
      color: #00fcff;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 400;
      letter-spacing: 0.1rem;
    }
    .close {
      width: 49px;
      height: 49px;
      cursor: pointer;

      img {
        width: 49px;
        height: 49px;
        line-height: 49px;
      }
    }

    .close2 {
      width: 49px;
      height: 49px;
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 99;

      img {
        width: 49px;
        height: 49px;
        line-height: 49px;
      }
    }
  }

  .card-contanier-content {
    width: 378px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #e6e6e6;

    .content-word {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      width: 100%;
      border-bottom: 1px rgba(242, 242, 242, 0.2) dashed;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 使用省略号隐藏 */

      .content {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        // display: block;
        // text-align: right;
        max-width: 200px;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
      }
    }

    .content-word:last-child {
      border-bottom: none;
    }
  }

  .goBack {
    width: 107px;
    height: 33px;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    line-height: 30px;
    font-family: PingFang SC;
    background-color: rgba(0, 168, 255, 0.6);
    border: 0.6px rgba(255, 255, 255, 0.6) solid;
    //border: 1px solid;
    //border-image: linear-gradient(160deg, white 0%, rgba(9, 27, 35, 0.8) 100%) 0.5;
    border-radius: 0px 5px 0px 5px;
    animation: rotate 2s linear infinite;
    cursor: pointer;
  }
}

@keyframes rotate {
  0% {
    //border: 1px solid #44aeff;
    border: 2px rgba(68, 174, 255, 0.6) solid;
  }
  50% {
    border: 2px rgba(68, 174, 255, 0.4) solid;
  }
  100% {
    border: 2px rgba(68, 174, 255, 0.6) solid;
  }
}
</style>

<style lang="scss">
.card-contanier {
  .el-tabs__item {
    color: #ffffff;
    font-size: 14px;
  }

  .el-tabs__item:hover {
    color: #00fcff;
  }

  .el-tabs__item.is-active {
    color: #00fcff;
  }

  /* 去掉tabs标签栏下的下划线 */
  .el-tabs__nav-wrap::after {
    position: static !important;
    /* background-color: #fff; */
  }

  /* 下划线切换高亮 */
  .el-tabs__active-bar {
    background-color: #00fcff;
  }
}
</style>
